<template>
  <div class="page-container">
    <CanvasAnimation/>
    <Announcement/>

    <div class="page-content">
      <div class="content-left">
        <BlogCarousel/>
        <ArticleContainer/>
      </div>
      <div class="content-right">
        <Sentence/>
        <BlogInfoCard/>
        <TagList/>
        <RecommendArticle/>
        <ImgscaleCrad/>
        <RandomArticleList/>
        <CategoryArticleCard/>
        <FriendLinkCard/>
      </div>
    </div>
  </div>
</template>

<script setup>
import CanvasAnimation from '@/components/home/CanvasAnimation.vue'
import Announcement from '@/components/home/Announcement.vue'
import BlogCarousel from '@/components/home/BlogCarousel.vue'
import BlogInfoCard from '@/components/home/BlogInfoCard.vue'
import ArticleContainer from '@/components/articles/ArticleContainer.vue'
import TagList from '@/components/articles/card/TagList.vue'
import CategoryArticleCard from '@/components/articles/card/CategoryArticleCard.vue'
import RandomArticleList from '@/components/articles/card/RandomArticleList.vue'
import FriendLinkCard from '@/components/com/FriendLinkCard.vue'
import RecommendArticle from '@/components/articles/card/RecommendArticle.vue'
import ImgscaleCrad from '@/components/com/ImgscaleCrad.vue'
import Sentence from '@/components/home/Sentence.vue'
</script>

<style scoped>
.content-right {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
.content-left,.content-right {
    margin-top: 20px;
  }
}
</style>
